<template>
  <q-item
    class="q-pl-sm item-normal"
    clickable
    replace
    :to="{ name: link }"
    :active-class="`item-active ${activeClass}`"
  >
    <q-item-section avatar>
      <q-icon style="width: 56px; height: 32px" :name="icon" />
    </q-item-section>
    <q-item-section class="q-pl-sm">
      <q-item-label>{{ name }}</q-item-label>
    </q-item-section>
  </q-item>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'static-item',
  props: {
    name: {
      type: String,
    },
    icon: {
      type: String,
    },
    link: {
      type: String,
    },
    activeClass: {
      type: String,
    },
  },
  setup(props) {
    return {};
  },
});
</script>
<style lang="scss" scoped>
.item-normal {
  color: $sub;
  margin-left: 3px;
}
.home-color {
  color: $drawer-home !important;
  border-left: 3px solid $drawer-home;
  margin-left: 0px;
}
.connection-color {
  color: $drawer-connection !important;
  border-left: 3px solid $drawer-connection;
  margin-left: 0px;
}
.content-color {
  color: $drawer-content !important;
  border-left: 3px solid $drawer-content;
  margin-left: 0px;
}
.library-color {
  color: $drawer-library !important;
  border-left: 3px solid $drawer-library;
  margin-left: 0px;
}
.analytics-color {
  color: $drawer-analytics !important;
  border-left: 3px solid $drawer-analytics;
  margin-left: 0px;
}
</style>
